<template>
    <div class="card">
        <div class="card_msg">
            <div class="card_frist">
                <div class="card_name">
                    <slot name="card_name">名字</slot>
                </div>
                <div class="card_num">
                    <span><slot name="card_num">1000</slot></span>
                    &nbsp; RMB
                </div>
            </div>
            <div class="card_img">
                <slot name="card_img"><img src="@/assets/logo.png" alt=""></slot>
            </div>
        </div>
        <div class="card_detial">
            <slot name="card_detial_left">
                <div class="card_detial_left">
                    类对象
                </div>
            </slot>
            <div class="card_detial_rigth">
                <slot name="card_detial_rigth">某陌路</slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Card",
};
</script>

<style scoped lang="less">
.card 
{
    min-width: 250px;
    background: #FFFFFF;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    box-shadow:0px 6px 10px #e7e7e7;
    border: 1px solid #e7e7e7;
    .card_msg
    {
        display: flex;
        justify-content: center;
        align-items: center;
        // border: 1px solid red;
        .card_name
        {
            // border: 1px solid red;
            padding: 5px 0;
            text-align: left;
        }
        .card_num
        {
            // border: 1px solid red;
            padding: 5px 0;
            text-align: left;
            font-size: 14px;
            span
            {
                font-size: 16px;
                font-weight: 800;
            }
        }
        div:nth-child(1)
        {
            flex: 2;
        }
        // div:nth-child(2)
        // {
        //     flex: 1;
        // }
    }
    .card_detial
    {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .card_detial_left
        {
            // padding: 2px 10px;
            // border: 1px solid red;
            // background: lightgreen;
            border-radius: 5px;
        }
        .card_detial_rigth
        {
            margin-left: 10px;
        }
    }
    .card_img
    {
        width: 100px !important;
        height: 100px !important;
        border-radius: 10px;
        box-shadow:0px 6px 10px #e7e7e7;
        img 
        {
            border: 1px solid #e7e7e7;
            border-radius: 10px;
            width: 100px;
            object-fit: cover;
        }
    }
}
</style>
